<template>
  <view class="container gray_bg personnel_info">
    <view class="cus_info_title">基本信息</view>
    <tm-form @submit="confirm" ref="formRef" v-model="form" transprent :label-width="300" :margin="[0, 0]" :border="false">
      <tm-sheet :margin="[10, 10]" :padding="[0, 0]" :round="3" :shadow="2">
        <tm-form-item required label="人员姓名" field="real_name" :rules="[{ required: true, message: '请输入人员姓名' }]">
          <view v-if="readonly" class="form_static_label">{{form.real_name}}</view>
          <tm-input v-else :inputPadding="[0, 0]" v-model.lazy="form.real_name" :transprent="true" :showBottomBotder="false"> </tm-input>
        </tm-form-item>
        <tm-form-item required label="手机号" field="phone" :rules="[{ required: true, message: '请输入手机号' }]">
          <view v-if="readonly" class="form_static_label">{{form.phone}}</view>
          <tm-input v-else :inputPadding="[0, 0]" v-model.lazy="form.phone" :transprent="true" :showBottomBotder="false"> </tm-input>
        </tm-form-item>
        <tm-form-item required label="职位" field="position" :rules="[{ required: true, message: '请选择职位' }]">
          <view v-if="readonly" class="form_static_label">{{form.position_text}}</view>
          <view v-else @click="showPicker = !showPicker" class="flex flex-row flex-row-center-between">
            <tm-text :userInteractionEnabled="false" :label="form.position_text || '请选择职位'"></tm-text>
            <tm-icon :userInteractionEnabled="false" :font-size="24" name="tmicon-angle-right"></tm-icon>
          </view>

          <tm-picker
              @confirm="selectPosition"
              :columns="positionList"
              map-key="name"
              v-model:model-str="show.pickerStr"
              v-model:show="showPicker"
              :default-value="show.pickerIndex"
              v-model="show.pickerIndex"
          ></tm-picker>
        </tm-form-item>
        <view v-if="form.is_leader === 1" class="person_charge">
          <tm-tag text :shadow="0" color="#165DFF" size="m" label="负责人"></tm-tag>
        </view>
        <tm-form-item label="邮箱" field="email">
          <view v-if="readonly" class="form_static_label">{{form.email}}</view>
          <tm-input v-else :inputPadding="[0, 0]" v-model.lazy="form.email" :transprent="true" :showBottomBotder="false"> </tm-input>
        </tm-form-item>
      </tm-sheet>
      <view class="cus_footer_btn">
        <tm-button form-type="submit" block label="确认" round="25"></tm-button>
      </view>
    </tm-form>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {addUser, editUser, getPositionList} from "@/api_request/api";
import { storeToRefs } from 'pinia'
import { useInfoStore } from '@/store/userInfo'

const userStore = useInfoStore()
const { userInfo } : any = storeToRefs(userStore)

//  根据参数判断  设置导航栏标题
const readonly = ref<boolean>(false)
const formRef = ref<any>(null)
const merchant_id = ref(userInfo.value.merchant_id || 12)//
const form = ref<any>({
  merchant_id: '', //租客id
  real_name: '',
  phone: '', //手机号
  email: '', //邮箱
  position: '', //职位
  id: ''
})
const showPicker = ref<boolean>(false)

const show = ref<any>({
  pickerIndex: [0],
  pickerStr: ''
})

const positionList = ref<any[]>([])

const isEdit = ref<boolean>(false)
onLoad(async (options) => {
  console.log('jp=======options',options)

  uni.setNavigationBarTitle({
    title: options?.isEdit ? '编辑人员信息' : options.title
  });
  isEdit.value = options?.isEdit || false

  if(options?.isEdit) {
  //  回显人员信息
    const row = options?.row ? JSON.parse(options.row) : {}
    form.value = row
  }
  getPositionList({}).then((res: any) => {
    console.log('jp=======职位字段',res)
    // name id
    positionList.value = res.data
  })
})

const selectPosition = (val: any) => {
  const item = positionList.value[val[0]]
  console.log('jp=====item=',item)
  form.value.position_text = item.name
  form.value.position = item.id
  // 设置 is_leader
  form.value.is_leader = item.is_leader
  show.pickerIndex = val[0]
}
const confirm = async () => {
//  新建人员 判断 添加还是新建
//   addUser editUser
  const res= await formRef.value.validate()
  if(!res.isPass) return
  //   继续保存
  const params = {
    ...res.data,
    merchant_id: merchant_id.value
  }
  let result: any
  if(form.value.id) {
  //   编辑
    params.id = form.value.id
    result =  await editUser(params)
  } else {
    result =  await addUser(params)
  }
  console.log('jp======result',result)
  const { code, message} = result
  if( code === 200) {
    readonly.value = true
    uni.$showMsg('操作成功！')
    uni.navigateTo({url: `/subpkg/personnel/list`})
  } else{
    uni.$showMsg(message)
  }
}

</script>
<style lang="scss" scoped>
  .personnel_info{
    height: 100%;
  }
  .person_charge{
    display: flex;
    justify-content: flex-end;
  }
</style>